<template>
  <div id="viewlist">
    <NavBar>景点列表</NavBar>
    <div id="hang">
      <div class="hang-item">
        <span>不限</span>
        <span class="fa fa-angle-down"></span>
      </div>
      <div class="hang-item" @touchstart="showOne=!showOne,showTwo=false">
        <span>排序方式</span>
        <span class="fa fa-angle-down"></span>
      </div>
      <div class="hang-item" @touchstart="showTwo=!showTwo,showOne=false">
        <span>筛选</span>
        <span class="fa fa-filter"></span>
      </div>
    </div>
    <div id="outer">
      <div id="inner">
        <span class="fa fa-search"></span>
        <input type="text" placeholder="中文/拼音/首字母" v-model="title" @touchstart="shuru">
      </div>
    </div>


    <div class="page-top">
      <router-link v-for="t in titleArr" :key="t._id" :to="'/my/search/viewlisttwo/detail/'+t._id">
        <div class="page-four-item">
          <img :src="'/img/loop/'+t.pic[0]">
          <div class="item-inner">
            <p>{{t.name}}</p>
            <p>{{t.intro}}</p>
            <div class="price">
              <span>￥</span><span>{{t.price[0].pprice}}</span><span>起</span>
            </div>
            <span>{{t.theme}}</span>
            <span>{{t.level}}</span>
          </div>
        </div>
      </router-link>

      <div class="more-tip" @click="moreClick" v-show="titleArr.length>0&&titleArr.length%5==0">点击加载更多</div>
      <div class="more-tip" v-show="titleArr.length%5!=0||titleArr.length==0">亲，没有更多景点啦</div>

      <BottomBar></BottomBar>
      
      
    </div>

    <div id="choose-one" v-if="showOne" @touchstart.self="showOne=false">
      <div class="one-item" @touchstart="toTop" :class="{'green':order==1}">
        <span>价格从低到高</span>
        <img src="/static/img/logo/gou.png" v-show="order==1">
        <div class="angle"></div>
      </div>
       <div class="one-item" @touchstart="toBottom" :class="{'green':order==-1}">
        <span>价格从高到低</span>
        <img src="/static/img/logo/gou.png" v-show="order==-1">
      </div>
    </div>

    <div id="choose-one" v-if="showTwo" @touchstart.self="showTwo=false">
      <div class="one-item" @touchstart="jibie=!jibie,jiage=false">
        <span>按景点级别</span>
        <img src="/static/img/logo/angle.png" style="width:15px;height:15px">
        <div class="angle1"></div>
      </div>
      <div id="jibie" v-show="jibie">
        <div class="one-item white" @touchstart="grade=''" :class="{'green':grade==''}">
          <span>不限</span>
          <img src="/static/img/logo/gou.png" v-show="grade==''">
        </div>
        <div class="one-item white" @touchstart="grade='A'" :class="{'green':grade=='A'}">
          <span>A</span>
          <img src="/static/img/logo/gou.png" v-show="grade=='A'">
        </div>
        <div class="one-item white" @touchstart="grade='AA'" :class="{'green':grade=='AA'}">
          <span>AA</span>
          <img src="/static/img/logo/gou.png" v-show="grade=='AA'">
        </div>
        <div class="one-item white" @touchstart="grade='AAA'" :class="{'green':grade=='AAA'}">
          <span>AAA</span>
          <img src="/static/img/logo/gou.png" v-show="grade=='AAA'">
        </div>
        <div class="one-item white" @touchstart="grade='AAAA'" :class="{'green':grade=='AAAA'}">
          <span>AAAA</span>
          <img src="/static/img/logo/gou.png" v-show="grade=='AAAA'">
        </div>
        <div class="one-item white" @touchstart="grade='AAAAA'" :class="{'green':grade=='AAAAA'}">
          <span>AAAAA</span>
          <img src="/static/img/logo/gou.png" v-show="grade=='AAAAA'">
        </div>
      </div>

      <div class="one-item" @touchstart="jiage=!jiage,jibie=false">
        <span>按价格</span>
        <img src="/static/img/logo/angle.png" style="width:15px;height:15px">
      </div>
      <div id="jiage" v-show="jiage">
        <div class="one-item white">
          <span>请输入价格区间</span>
        </div>
        <div class="one-item white">
          <input type="text"  placeholder="最低价" v-model.number="bottom"> —— 
          <input type="text" placeholder="最高价" v-model.number="top">
        </div>
      </div>

      <div id="button">
        <button @touchstart="btnClick">确定</button>
      </div>

    </div>




  </div>
</template>

<script>
import BottomBar from '../components/BottomBar.vue';
import NavBar from '../components/NavBar.vue';

export default {
  data:function(){
    return {
      title:"",
      titleArr:[],
      showOne:false,
      showTwo:false,
      jibie:false,
      jiage:false,
      order:0,
      grade:"",
      top:null,
      bottom:null
    }
  },
  components:{
    BottomBar,
    NavBar
  },
  computed:{
    
  },
  methods:{
    reload:function(){
      var page = this.titleArr.length/5;
      if(page<1){
        page=1;
      }else{
        page = page+1;
      }
      // 根据搜索项（城市名或主题名或景点名）搜索
      this.http.post("/api/condition",{txt:this.title,order:this.order*1,grade:this.grade,top:this.top,bottom:this.bottom,page:page})
      .then(res=>{
        this.titleArr = res.data.msg;
      });
    },
    shuru:function(){
        location.hash = "/my/search";
    },
    btnClick:function(){
      this.showTwo = false;
      this.titleArr = [];
      this.reload();
    },
    toTop:function(){
      this.order=1;
      this.showOne=false;
      this.titleArr = [];
      this.reload();
    },
    toBottom:function(){
      this.order=-1;
      this.showOne=false;
      this.titleArr = [];
      this.reload();
    },
    moreClick:function(){
      this.reload();
    },
  },
  mounted:function(){
    this.title= this.$route.params.value;
    this.reload();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #viewlist{
    width:100vw;
  }
  #hang{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:white;
  }
  .hang-item{
    color:#9b9b9b;
    font-size:13px;
    height:34px;
    line-height:34px;
    border-bottom:1px solid #dedede;
    border-right:1px solid #dedede;
    flex-grow:1;
    text-align:center;
  }
  #outer{
    height:46px;
    background-color:#CCCCCC;
    padding:8px;
  }
  #inner{
    background-color:white;
    height:30px;
    border-radius:5px;
    padding-left:13px;
  }
  #inner input{
    border:none;
    height:30px;
    width:80vw;
  }
  #inner span{
    color:#dedede;
    font-size:18px;
  }

  .page-four-item{
    display:flex;
    align-items:center;
    background-color:white;
    padding:9px 15px 9px 9px;
    border-top:solid 1px #dedede;
  }
  .page-four-item>img{
    width:76px;
    height:74px;
  }
  .item-inner{
    flex-grow:1;
    margin-left:8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item-inner>p{
    margin:0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item-inner>p:nth-of-type(1){
    color:#4a4a4a;
    font-size:14px;
  }
  .item-inner>p:nth-of-type(2){
    color:#9b9b9b;
    font-size:10px;
  }
  .item-inner>span:nth-of-type(1){
    color:#666;
    font-size:10px;
  }
  .item-inner>span:nth-of-type(2){
    font-size:10px;
    color:#FF6F6D;
  }
  .price{
    text-align:right;
    height:25px;
  }
  .price>span:nth-of-type(1){
    display:inline-block;
    font-size: 10px;
    color: #ff6f6d;
    line-height: 16px;
    height:16px;
  }
  .price>span:nth-of-type(2){
    font-size: 16px;
    color: #ff6f6d;
    font-weight: bold;
    line-height: 14px;
  }
  .price>span:nth-of-type(3){
    font-size: 10px;
    line-height: 14px;
    color: #bcbcbc;
  }
  a{
    text-decoration:none;
  }
  #choose-one{
    position:absolute;
    background-color:rgba(0,0,0,0.3);
    z-index:10;
    top:77px;
    left:0;
    width:100%;
    height:calc(100vh - 77px);
  }
  .one-item{
    background-color:#F8F8F8;
    font-size:12px;
    display:flex;
    justify-content:space-between;
    padding:10px 15px;
    align-items:center;
    border-top:solid 1px #dedede;
    color:#666;
    position:relative;
    height:42px;
  }
  .one-item img{
    width:20px;
    height:20px;
  }
  .angle{
    position:absolute;
    border:solid 9px;
    border-color:transparent transparent #E7E7E7 transparent;
    width:0;
    height:0;
    top:-17px;
    left:50%;
  }
  .angle1{
    position:absolute;
    border:solid 9px;
    border-color:transparent transparent #E7E7E7 transparent;
    width:0;
    height:0;
    top:-17px;
    right:12%;
  }
  .green{
    color:#5abc00;
  }
  .white{
    background-color:white;
  }
  #button{
    padding-right:30px;
    background-color:#F8F8F8;
    height:70px;
    border-top:solid 1px #dedede;
    line-height:70px;
    text-align:right;
  }
  #button button{
    border:none;
    color:white;
    background-color:#FF6F6D;
    width:136px;
    height:40px;
    border-radius: 4px;
  }
  .more-tip{
    width:100%;
    height:42px;
    background-color:white;
    text-align:center;
    line-height:42px;
    font-size:13px;
    color:#666;
    margin-bottom:30px;
    border-top:1px solid #dedede;
  }
</style>
